<template>
  <div class="project-form-container">
    <h2 class="form-title">项目选题创建</h2>
    <el-form :model="form" @submit.native.prevent="submitForm" class="project-form">
      <el-form-item label="选题名称">
        <el-input v-model="form.topic"></el-input>
      </el-form-item>
      <el-form-item label="选题描述">
        <el-input type="textarea" v-model="form.description" rows="6" placeholder="请添加项目描述"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="newTask">添加项目基础任务</el-button>
      </el-form-item>
      <el-form-item label="项目基础任务">
        <el-scrollbar class="task-scroll">
          <div class="task-list">
            <div v-for="task in form.tasks" :key="task.id" class="task-card">
              <span class="task-name">{{ task.name }}</span>
              <span class="task-description">{{ task.description }}</span>
              <el-button type="text" @click="editTask(task)">编辑</el-button>
            </div>
          </div>
        </el-scrollbar>
      </el-form-item>
      <el-form-item class="form-buttons">
        <el-button type="primary" @click="submitForm" class="create-button">创建项目选题</el-button>
        <el-button @click="goBack" class="back-button">返回</el-button>
      </el-form-item>
    </el-form>

    <el-dialog title="编辑任务" v-model="taskDialogVisible">
      <el-form :model="currentTask">
        <el-form-item label="任务名称">
          <el-input v-model="currentTask.name"></el-input>
        </el-form-item>
        <el-form-item label="任务类型">
          <el-select v-model="currentTask.type" placeholder="请选择任务类型">
            <el-option label="设计" value="设计"></el-option>
            <el-option label="开发" value="开发"></el-option>
            <el-option label="测试" value="测试"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="任务描述">
          <el-input type="textarea" v-model="currentTask.taskDescription"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="taskDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveTask">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'
import { useRouter } from 'vue-router'

const router = useRouter()

const form = reactive({
  topic: '',
  description: '',
  tasks: []
})

const taskDialogVisible = ref(false)
const currentTask = reactive({
  id: null,
  name: '',
  type: '',
  taskDescription: ''
})

const submitForm = () => {
  if (!form.topic) {
    ElMessage.error('请选择项目选题')
    return
  }

  saveProject()
}

const saveProject = () => {
  axios.post('http://localhost:8080/project_topics/add', form)
    .then(response => {
      ElMessage.success('项目选题创建成功')
      router.push({ name: 'project-selection' })
    })
    .catch(error => {
      ElMessage.error('项目选题创建失败')
    })
}

const newTask = () => {
  currentTask.id = null
  currentTask.name = ''
  currentTask.type = ''
  currentTask.taskDescription = ''
  taskDialogVisible.value = true
}

const editTask = (task) => {
  currentTask.id = task.id
  currentTask.name = task.name
  currentTask.type = task.type
  currentTask.taskDescription = task.taskDescription
  taskDialogVisible.value = true
}

const saveTask = () => {
  if (currentTask.id) {
    const index = form.tasks.findIndex(task => task.id === currentTask.id)
    if (index !== -1) {
      form.tasks[index] = { ...currentTask }
    }
  } else {
    currentTask.id = form.tasks.length + 1
    form.tasks.push({ ...currentTask })
  }
  taskDialogVisible.value = false
}

const goBack = () => {
  router.back()
}
</script>

<style scoped>
.project-form-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f9f9f9;
}

.form-title {
  text-align: center;
  margin-bottom: 20px;
  font-size: 24px;
  color: #333;
}

.project-form {
  padding: 0;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-form-item[label="项目描述"] .el-input {
  min-height: 150px; /* 增加项目描述的高度 */
}

.el-button {
  margin-right: 10px;
}

.create-button {
  background-color: #409eff;
  color: white;
  border-radius: 4px;
  padding: 10px 20px;
}

.create-button:hover {
  background-color: #66b1ff;
}

.back-button {
  background-color: #e6e6e6;
  color: #333;
  border-radius: 4px;
  padding: 10px 20px;
}

.back-button:hover {
  background-color: #d3d3d3;
}

.el-input,
.el-select {
  width: 100%;
}

.el-form-item__content {
  display: flex;
  flex-direction: column;
}

.el-input__inner {
  border-radius: 4px;
}

.el-select .el-input {
  border-radius: 4px;
}

.task-scroll {
  max-height: 200px;
  overflow: auto;
  border: 1px solid #ddd;
  padding: 10px;
  background-color: white;
}

.task-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.task-card {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f5f5f5;
  position: relative;
}

.task-name {
  font-weight: bold;
  margin-bottom: 5px;
}

.task-description {
  color: #666;
}
</style>
